<template>
  <div class="mt-[2rem] border-slate-300 border-[1px] rounded overflow-hidden">
    <slot name="example"></slot>
    <div class="border-slate-300 border-t-[1px] flex items-end justify-end py-[5px] pr-[20px]">
      <el-icon class="cursor-pointer" size="16" @click="showCode = !showCode">
        <DCaret />
      </el-icon>
    </div>
    <!-- 示例代码 -->
    <div :style="{ height: showCode ? 'auto' : '0' }">
      <slot name="code"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import highlight from 'highlight.js'
  const showCode = ref(false)
  onMounted(() => {
    highlight.highlightAll()
  })
</script>
